<template>
  <el-container>
    <el-header style="margin-bottom: 10px; border-bottom: 0;">
      <div class="left-panel">
        <div class="left-panel-search">
          <el-select v-if="isSuperTenant" style="width: 100%" clearable v-model="queryParams.sourceCode"
                     placeholder="请选择数据源" @change="sourceChange">
            <el-option v-for="item in sourceList" :label="item.name" :value="item.code"></el-option>
          </el-select>
          <el-input placeholder="表名称" clearable v-model="queryParams.name"></el-input>
          <el-input placeholder="表描述" clearable v-model="queryParams.comment"></el-input>
          <el-button type="primary" plain icon="el-icon-search" @click="handleSearch"
                     v-power="'system:row:queryTableList'"></el-button>
          <el-button type="info" plain icon="el-icon-refresh" @click="handleResetQuery"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="no-padding" style="margin-bottom: 10px;">
      <el-table style="width: 100%" ref="table" row-key="id" v-loading="loading" :data="tableList"
                :stripe="config.stripe" :border="config.border" :size="config.size"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="表名称" align="center" prop="tableName"></el-table-column>
        <el-table-column label="表描述" align="center" prop="tableComment"></el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
        <el-table-column label="更新时间" align="center" prop="updateTime"></el-table-column>
      </el-table>
    </el-main>
    <el-footer style="border-top: 0;">
      <div class="jcx-table-page">
        <div class="jcx-table-do"></div>
        <div class="jcx-table-pagination">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
                         :small="true" :page-sizes="[10, 20, 30, 40, 50]" v-model:currentPage="queryParams.pageNum"
                         v-model:page-size="queryParams.pageSize" @current-change="getList"
                         @update:page-size="getList"></el-pagination>
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script setup lang="js">
import {computed, onMounted, ref, watch} from "vue";
import token from "@/utils/token";
import tableApi from "@/api/generator/row";
import sourceApi from "@/api/system/source";

const isSuperTenant = computed(() => token.isSuperTenant());

const props = defineProps({
  form: {
    type: Object,
    default: {}
  }
});
const formRef = ref();
// 加载动画
const loading = ref(false);
// 查询条件
const total = ref(0);
const queryParams = ref({
  sourceCode: null,
  name: null,
  comment: null,
  generated: null,
  pageNum: 1,
  pageSize: 10
});
const sourceList = ref([]);
const tableList = ref([]);
const selectList = ref([]);
// 表格配置
const config = ref({
  // 表格大小
  size: "default",
  // 表格边框
  border: true,
  // 表格斑马图纹
  stripe: true
});

watch(() => queryParams.value.sourceCode, (value) => {
  props.form.sourceCode = value;
});
watch(() => selectList.value, (value) => {
  props.form.tableNameList = value.map(item => item.tableName);
});

const sourceChange = () => {
  tableList.value = [];
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  handleSearch();
}

// 查询按钮触发方法
const handleSearch = () => {
  getList();
}

// 重置查询条件触发按钮
const handleResetQuery = () => {
  tableList.value = [];
  queryParams.value = {
    name: null,
    comment: null,
    pageNum: 1,
    pageSize: 10
  };
  if (isSuperTenant) {
    queryParams.value.sourceCode = token.getTenantSource();
  }
  handleSearch();
}

const getList = () => {
  tableApi.tableList.get(queryParams.value).then(response => {
    tableList.value = response.data.list;
    total.value = response.data.total;
  })
}

// 表格选中触发方法
const handleSelectionChange = (selection) => {
  selectList.value = selection.map(item => item);
}

onMounted(() => {
  if (isSuperTenant) {
    sourceApi.lists.get({enabled: true}).then(response => {
      sourceList.value = response.data.list;
      queryParams.value.sourceCode = token.getTenantSource();
      getList();
    })
  } else {
    getList();
  }
});
</script>
